import styles from './login.module.scss';
import './login.less';
import initLoginBg from './init.ts';
import { ChangeEvent, useEffect, useState } from 'react';
import { Button, Input, message, Space } from 'antd';
import { CaptchaAPI, LoginAPI } from '@/request/api';
import { useNavigate } from 'react-router-dom';
function View() {
  // 加载完这个组件后，对canvas初始化
  useEffect(() => {
    getCaptchImage();
    initLoginBg();
    window.onresize = function () {
      initLoginBg();
    };
  }, []);
  let navigateTo = useNavigate();
  //   用户信息定义
  const [userNameVal, setUserNameVal] = useState('');
  const [passWordVal, setPassWordVal] = useState('');
  const [captchVal, setCaptchaImg] = useState('');
  //   获取用户名
  const userChange = (e: ChangeEvent<HTMLInputElement>) => {
    setUserNameVal(e.target.value);
  };
  //   获取密码
  const passWordChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPassWordVal(e.target.value);
  };
  //   获取验证码
  const captchChange = (e: ChangeEvent<HTMLInputElement>) => {
    setCaptchaImg(e.target.value);
  };
  // 点击登录按钮的事件函数
  const gotoLogin = async () => {
    console.log('用户输入的用户名，密码，验证码分别是：', userNameVal, passWordVal, captchVal);
    // 验证是否有空值
    // if (!userNameVal.trim() || !passWordVal.trim() || !captchVal.trim()) {
    //   message.warning('请完整输入信息！');
    //   return;
    // }
    // 发起登录请求
    let loginAPIRes = await LoginAPI({
      username: userNameVal,
      password: passWordVal,
      code: captchVal,
      uuid: localStorage.getItem('uuid') as string,
    });
    if (loginAPIRes.code === 200) {
      // 1、提示登录成功
      message.success('登录成功！');
      // 2、保存token
      localStorage.setItem('lege-react-management-token', loginAPIRes.token);
      // 3、跳转到/page1
      navigateTo('/page1');
      // 4、删除本地保存中的uuid
      localStorage.removeItem('uuid');
    }
  };
  // 点击获取验证码请求
  const getCaptchImage = async () => {
    debugger;
    let captchaAPIRes = await CaptchaAPI();
    if (captchaAPIRes.code === 200) {
      // 1、把图片数据显示在img上面
      setCaptchaImg('data:image/gif;base64,' + captchaAPIRes.img);
      console.log(captchVal);

      // 2、本地保存uuid，给登录的时候用
      localStorage.setItem('uuid', captchaAPIRes.uuid);
    }
    // console.log(imgFrom);
  };
  return (
    <div className={styles.loginPage}>
      {/* 存放背景 */}
      <canvas id="canvas" style={{ display: 'block' }}></canvas>
      <div className={styles.loginBox + ' loginbox'}>
        <div className={styles.title}>
          <h1>后台管理系统</h1>
          <p>Happy Everyday</p>
        </div>
        <div className="form">
          <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
            <Input placeholder="用户名" onChange={userChange}></Input>
            <Input.Password placeholder="密码" onChange={passWordChange}></Input.Password>
            <div className="captchBox">
              <Input placeholder="验证码" onChange={captchChange}></Input>
              <div className="captchImg">
                <img src={captchVal} alt="" height="38px" onClick={getCaptchImage} />
              </div>
            </div>
            <Button type="primary" className="loginButton" block onClick={gotoLogin}>
              登录
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
}

export default View;
